<!--
 * @Description: 查看产品详情-弹框
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->

<template>
    <el-dialog title="单位产品详情" :close-on-click-modal="false" :visible="isShow" @close="closeDialog" :width="'800px'">
        <div class="dialogContent">
            <div class="head-info">

                <div class="title">单位信息</div>
                <el-divider></el-divider>

                <el-row>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">单位名称：</span> {{ productdata.unitName }}</p>
                            <p><span class="title">单位产品类型：</span> {{ productdata.unitProductType }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">单位ID：</span> {{ productdata.unitId }}</p>
                            <p><span class="title">租户产品名称：</span> {{ productdata.unitProductName }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">单位产品编号：</span> {{ productdata.unitProductCode }}</p>
                        </div>
                    </el-col>
                </el-row>
                <br>
                <div class="title">产品信息</div>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">产品线：</span> {{ productInfo.productLine }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">产品名称：</span> {{ productInfo.productName }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cell">
                            <p><span class="title">产品编号：</span> {{ productInfo.productCode }}</p>
                        </div>
                    </el-col>
                </el-row>
                <br>
                <div class="title">服务明细</div>
                <el-divider></el-divider>
            </div>
            
            <div class="dialog-tabs">
                <div class="serviceInfo-table">
                    <el-table
                        :data="plugTableData.tableData"
                        border
                        :height="200"
                        header-row-class-name="header-row"
                        style="width: 100%">
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                        </el-table-column>

                        <el-table-column
                            v-for="col in plugTableData.headData"
                            :show-overflow-tooltip=" true "
                            :prop="col.title"
                            :label="col.text"
                            :key="col.title">
                            <!-- 自定义显示格式 -->
                            <template slot-scope="scope">
                                
                                <!-- 服务类型 -->
                                <div v-if="col.title == 'serviceType'">
                                    <p v-if="scope.row[col.title]==0">标准产品</p>
                                    <p v-if="scope.row[col.title]==1">平台服务</p>
                                    <p v-if="scope.row[col.title]==2">业务包</p>
                                    <p v-if="scope.row[col.title]==3">第三方服务</p>
                                    <p v-if="scope.row[col.title]==4">插件</p>
                                </div>
                                <!-- 服务状态 -->
                                <div v-else-if="col.title == 'serviceStatus' ">
                                    <p v-if="scope.row[col.title]=='0'">未生效</p>
                                    <p v-if="scope.row[col.title]=='1'">生效中</p>
                                    <p v-if="scope.row[col.title]=='2'">待生效</p>
                                    <p v-if="scope.row[col.title]=='3'">失效</p>
                                </div>
                                <!-- 服务内容 -->
                                <span v-else-if="col.title == 'serviceParameter'">
                                    <span v-html="scope.row[col.title]"></span>
                                </span>
                                <span v-else>
                                    <!-- <i class="el-icon-time"></i> -->
                                    <span>{{ scope.row[col.title] }}</span>
                                </span>
                            </template>

                        </el-table-column>
                    </el-table>

                    <!-- 分页插件 -->
                    <!-- <div v-if="paginationShow">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            @prev-click="prevClick"
                            @next-click="nextClick"
                            :current-page="1"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div> -->

                </div>
            </div>

            
        </div>
        
        <div slot="footer" class="dialog-footer">
            <button class="el-button el-button--primary" @click="closeDialog">确 定</button>
            <button class="el-button el-button--info" @click="closeDialog">取 消</button>
        </div>
    </el-dialog>

    
</template>

<script>
import {totalPageSize, totalPageSizes} from "../../../utils/tool";
export default {
    name: "detail-dialog",
    props: { },
    components: {},
    computed: {},
    data: () => ({

        isShow:false,
        // 标题数据
        productdata:{},
        // 产品信息
        productInfo:{},
        // 服务信息
        plugTableData:{
            headData:[
                {
                    title:"serviceType",
                    text:"服务类型"
                },{
                    title:"serviceName",
                    text:"服务项"
                },{
                    title:"serviceParameter",
                    text:"服务内容"
                },{
                    title:"serviceStatus",
                    text:"服务状态"
                },{
                    title:"beginDate",
                    text:"生效日期"
                },{
                    title:"expireDate",
                    text:"失效日期"
                }
            ],
            tableData:[
                // {
                //     serviceType:"服务类型",
                //     serviceName:"11个月",
                //     serviceParameter:"服务内容",
                //     serviceStatus:"状态",
                //     beginDate:"2019-10-5",
                //     expireDate:"2020-05-20"
                    
                // }
            ]
        },

        // 分页插件----
        // paginationShow:true,
        // pageSizes:totalPageSizes, //下拉动态设置当前页数
        // pageSize:totalPageSize,    //当前页显示多少条数据 默认10条
        // pageNum:1, //当前页
        // total:0, //总条目数
    }),
    created() {},
    mounted() {},
    watch: {},
    methods: {
        // 组件入口
        open(data){
            this.productdata = {
                unitName:data.unitName, //单位名称
                unitId:data.unitId, //单位ID
                unitProductType:data.unitProductType=="1"?"正式":"试用", //单位产品类型
                unitProductName:data.unitProductName, //单位产品名称
                unitProductCode:data.unitProductCode, //单位产品编号
            }
            this.isShow = true;
            let options = {
                // unitProductCode:data.unitProductCode
                code:data.unitProductCode
            }
            this.getProductDetail(options);
        },
        //获取数据
        getProductDetail(options){
            
            this.api.productDetail(
                options,{loading:true}
            ).then(res =>{
                // console.log(res);
                let listData = res.data;
                //产品信息数据
                this.productInfo = listData.productInfo;
                // 服务明细数据
                listData.serverInfos.forEach( item =>{
                    item.beginDate = this.formatTime(item.beginDate);
                    item.expireDate = this.formatTime(item.expireDate);
                    item.serviceParameter = item.serviceParameter?JSON.parse(item.serviceParameter).serviceContent:"";
                });
                this.plugTableData.tableData = listData.serverInfos;
            }).catch(err =>{
                console.log(err);
                // this.$alert(err.data || err);
            });
        },

        // 分页插件-----------------start
        // handleSizeChange(val) { //pageSize 改变时会触发
        //     console.log(`每页 ${val} 条`);
        //     this.pageSize = val;
        //     this.pageNum = 1;
        //     // this.getTenantData();
        //     this.paginationShow = false;
        //     this.$nextTick( () =>{
        //         this.paginationShow = true;
        //     });
        // },
        // handleCurrentChange(val) { //pageNum 改变时会触发
        //     console.log(`当前页: ${val}`);
        //     this.pageNum = val;
        //     // this.getTenantData();
        // },
        // prevClick(val){  //用户点击上一页按钮改变当前页后触发
        //     console.log(`上一页: ${val}`);
        //     this.pageNum = val;
        //     // this.getTenantData();
        // },
        // nextClick(val){ //用户点击下一页按钮改变当前页后触发
        //     console.log(`下一页: ${val}`);
        //     this.pageNum = val;
        //     // this.getTenantData(); 
        // },
        // 分页插件-----------------end


        closeDialog(){
            this.plugTableData.tableData=[];
            this.isShow = false;
        },

        formatNumber (n){
            n = n.toString()
            return n[1] ? n : '0' + n
        },
        // 时间格式化
        formatTime(date){
            if(!date)return;
            date = new Date(JSON.parse(date));
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds();
            return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
        }

    }
};
</script>

<style lang="scss">

.dialog-tabs{
    .el-table__body, .el-table__footer, .el-table__header{
        font-size: 12px;
        .el-table__row td{
            padding: 3px;
        }
    }
    .el-table th, .el-table tr.header-row{
        height:37px;
        background-color: #F5F7FA!important;
        color:#324558;
        font-size:12px;
        th.is-leaf{
            padding:0;
        }
    }
}
</style>
<style lang="scss" scoped>

.dialogContent{
    .title{
        color: #324558;
        font-weight: 600;
    }
    .el-divider--horizontal{
        margin: 10px 0;
    }
    .head-info{
        // background-color:#EDF0F6;
        padding:5px 20px 10px 20px;
        .cell{
            line-height:25px;
            // font-size:12px;
            color:#324558;
            font-weight:400;
            .title{
                font-weight:500;
                // color:#324558;
            }
        }
    }
    .dialog-tabs{
       .serviceInfo-table{
           padding:0 20px;
           height: 200px;
       }
    }
    .el-table--border{
        font-size: 12px;
    }
}

</style>
